<script setup>
import {onMounted, ref} from "vue";
import jumpHelper from "@/js/pageJumper";

  onMounted(()=>{
    jumpHelper.jumpToCustomerNewTask()
  })

  const mode = ref(0)
  const topTabbarJump = (newIndex)=>{
    mode.value = newIndex;
    switch (newIndex){
      case 0: jumpHelper.jumpToCustomerNewTask();
        break;
      case 1: jumpHelper.jumpToCustomerPublished();
        break;
      case 2: jumpHelper.jumpToCustomerDelivering();
        break;
      case 3: jumpHelper.jumpToCustomerDone();
        break;
      case 4: jumpHelper.jumpToCustomerMessage();
        break;
    }
  }
</script>

<template>
  <div class="appearing-container">
    <!--顶部导航栏-->
    <div class="top-tabbar">
      <p @click="topTabbarJump(0)" :class="mode === 0 ? 'chosen-top-tabbar' : 'unchosen-top-tabbar'">发布代拿任务</p>|
      <p @click="topTabbarJump(1)" :class="mode === 1 ? 'chosen-top-tabbar' : 'unchosen-top-tabbar'">已发布任务</p>|
      <p @click="topTabbarJump(2)" :class="mode === 2 ? 'chosen-top-tabbar' : 'unchosen-top-tabbar'">派送中任务</p>|
      <p @click="topTabbarJump(3)" :class="mode === 3 ? 'chosen-top-tabbar' : 'unchosen-top-tabbar'">已完成任务</p>|
      <p @click="topTabbarJump(4)" :class="mode === 4 ? 'chosen-top-tabbar' : 'unchosen-top-tabbar'">消息</p>
    </div>
    <!--底部路由-->
    <router-view class="grandchildren-router-view"></router-view>
  </div>
</template>

<style scoped>
  .top-tabbar{
    position: absolute;
    top: 0;
    left: 0;
    right: 160px;
    height: 48px;
    justify-content: center;
    display: flex;
    align-items: center;
    font-size: 18px;
    color: #999;
    user-select: none;
  }
  .top-tabbar p{
    white-space: nowrap;
    margin: 0 12px 0 12px;
  }
  .chosen-top-tabbar{
    color: #333;
    transition: .4s;
    position: relative;
  }
  .chosen-top-tabbar:after{
    content: "";
    width: 24px;
    height: 4px;
    background-color: #9994e1;
    border-radius: 2px;
    position: absolute;
    left: 50%;
    top: calc(100% + 4px);
    transform: translateX(-50%);
    transition: .4s;
  }
  .unchosen-top-tabbar{
    color: #999;
    cursor: pointer;
    transition: .4s;
  }
  .grandchildren-router-view{
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    top: 56px;
  }
</style>